<!-- 条件节点信息修改页 -->
<template>
    <Drawer title="修改条件" v-model="localShowConfig" width="700" @on-visible-change="changeVisible"
        :mask-closable="false" class-name="drawer_box">
        <div class="condition_item" v-if="formData">
            <Space>
                条件名称：
                <Input v-model="formData.nodeName" placeholder="请输入条件名称" clearable />
            </Space>
        </div>
        <div class="condition_item" v-if="formData">
            <Space>
                优先级&nbsp;&nbsp;&nbsp;：
                <Input v-model="formData.priorityLevel" placeholder="请输入条件名称" clearable />
            </Space>
        </div>
        <div class="condition_item" v-if="formData">
            <Space>
                条件关系：
                <RadioGroup v-model="formData.mode">
                    <Radio v-for="item in relationList" :label="item.id">{{ item.label }}</Radio>
                </RadioGroup>
            </Space>
        </div>
        <div class="condition_item" v-if="formData">
            <vxe-table ref="tableRef" :data="formData.conditionList"  border="none" size="small" auto-resize stripe :min-height="50">
                <vxe-column title="描述">
                    <template #default="{row}">
                        <Input v-model="row.label" placeholder="描述" clearable />
                    </template>
                </vxe-column>
                <vxe-column title="条件字段">
                    <template #default="{row}">
                        <Input v-model="row.field" placeholder="条件字段" clearable />
                    </template>
                </vxe-column>
                <vxe-column title="运算符">
                    <template #default="{row}">
                        <Select v-model="row.operator" clearable placeholder="运算符" >
                            <Option v-for="item in operatorList" :value="item.value">{{ item.label }}</Option>
                        </Select>
                    </template>
                </vxe-column>
                <vxe-column title="值">
                    <template #default="{row}">
                        <Input v-model="row.value" placeholder="值" clearable />
                    </template>
                </vxe-column>
                <vxe-column title="操作" fixed="right" width="80" align="center">
                    <template #default="{ row }">
                        <div class="table_btns">
                            <text-btn type="del" @click="delData(index)" />
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
        <Button type="primary" @click="addCondition">添加条件</Button>
        <div class="demo-drawer-footer">
            <Button type="primary" @click="save">保存</Button>
        </div>
    </Drawer>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    showConfig: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object
    }
});

const conditionList = ref([]);

watch(() => props.data, (newValue) => {
    formData.value = newValue;
});

// 表头配置
const columns = [
    { title: '描述', key: 'label', slot: 'label', align: 'center' },
    { title: '条件字段', key: 'field', slot: 'field', align: 'center' },
    { title: '运算符', key: 'operator', slot: 'operator', align: 'center' },
    { title: '值', key: 'value', slot: 'value', align: 'center' },
    { title: '操作', slot: 'action', align: 'center' }
]

// 条件关系列表
const relationList = ref([
    { label: '且', id: 1 },
    { label: '或', id: 2 }
])

// 运算符列表
const operatorList = ref([
    { label: '等于', value: '===' },
    { label: '不等于', value: '!==' },
    { label: '大于', value: '>' },
    { label: '大于等于', value: '>=' },
    { label: '小于', value: '<' },
    { label: '小于等于', value: '<=' },
])

const formData = ref({
    nodeName: props.data ? props.data.nodeName : '', // 条件名称
    priorityLevel: props.data ? props.data.priorityLevel : '', // 优先级
    mode: props.data ? props.data.mode : '', // 条件关系 1: 且 2: 或
    conditionList:props.data ?  props.data.conditionList : [], // 条件列表
});

const localShowConfig = ref(props.showConfig);

const emit = defineEmits(['changeVisible', 'update:showConfig']);

// 条件条件
const addCondition = () => {
    formData.value.conditionList.push({
        label: '',
        field: '',
        opeartor: '',
        value: ''
    });
}

/**
 * 删除行
 * @param {
 *  index: 下标
 * }
*/
const delData = (index) => {
    formData.value.conditionList.splice(index, 1);
}

/**
 *  更改数据
 * @param {
 *  label: '字段名'
 *  val: '更改值'
 *  index: '下标'
 * }
 * */
const handleChange = (label, val, index) => {
    if (label == 'operator') {
        formData.value.conditionList[index][label] = val;
    } else {
        formData.value.conditionList[index][label] = val.target.value;
    }
}

// 保存
const save = () => {
    emit('changeVisible', formData.value);
}

// 修改状态提交关闭
const changeVisible = (val) => {
    emit('update:showConfig', val);
}

</script>

<style scoped lang="scss">
.condition_item {
    margin-bottom: 15px;
}

.demo-drawer-footer {
    width: 700px;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
:deep(.vxe-table--body-wrapper) {
    overflow-x: unset !important;
    overflow-y: unset !important;
}
:deep(.ivu-table) {
    overflow: unset;
}
</style>